<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Magic Compass Alipay Barcode User Site</title>
<link href="<%=request.getContextPath()%>/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/resources/css/style.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/resources/jquery/jquery-2.2.1.min.js"></script>
<script src="<%=request.getContextPath()%>/resources/bootstrap/js/bootstrap.min.js"></script>
<script src="<%=request.getContextPath()%>/resources/js/md5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#barcodePayForm').submit(function (e) {
		if($("#newPwd").val() != $("#confirmPwd").val()){
			$("#warningModalContent").text("New passowrd should same as confirm password.");
			$("#warningModal").modal();
			e.preventDefault();
		}else if(calcMD5($("#oldPwd").val()) != $("#dbMD5Pwd").val()){
			$("#warningModalContent").text("Wrong old password.");
			$("#warningModal").modal();
			focusItem = "A"; // totalAmt
			e.preventDefault();
		}else{
			$("#waitingModal").modal({
			  backdrop: 'static',
			  keyboard: false
			});
		}
	});
	
	$('#warningModal').on('hidden.bs.modal', function(event) {
		if("A" == focusItem){
			$("#totalAmt").select();
			$("#totalAmt").focus();
		}else{
			$("#barcode").select();
			$("#barcode").focus();
		}
	});
});
</script>
</head>
<body>
<div id="wrap">
<%@ include file="../header.jsp" %>
<div class="container">
	<div class="page-header">
		<h1 class="text-center">Change Password Page</h1>
	</div>
	<br>
	<div class="page-header">
		<h3 class="text-center">Input Password Information</h3>
	</div>
	<br>
	<form method="POST" action="<%=request.getContextPath()%>/user/changePwdConfirm" id="barcodePayForm">
		<div class="row">
			<div class="col-md-2">&nbsp;</div>
			<div class="col-md-8">
				<table class="table table-bordered table-condensed table-striped">
					<tr>
				        <td class="lead">User Name:</td>
			            <td><%=request.getAttribute("userName") %></td>
			        </tr>
					<tr>
				        <td class="lead">Old Password:</td>
				        <td>
				        	<div class="row">
								<div class="col-md-6"><input type="text" class="form-control input-small" id="oldPwd" name="oldPwd" placeholder="password" value=""></div>
								<div class="col-md-6">&nbsp;</div>
							</div>				       		
				        </td>
			        </tr>
			        <tr>
				        <td class="lead">New Password:</td>
				        <td>
				        	<div class="row">
								<div class="col-md-6"><input type="password" class="form-control input-small" id="newPwd" name="newPwd" placeholder="password" value=""></div>
								<div class="col-md-6">&nbsp;</div>
							</div>				       		
				        </td>
			        </tr>
			        <tr>
				        <td class="lead">Confirm New Password:</td>
				        <td>
				        	<div class="row">
								<div class="col-md-6"><input type="password" class="form-control input-small" id="confirmPwd" name="confirmPwd" placeholder="password" value=""></div>
								<div class="col-md-6">&nbsp;</div>
							</div>				       		
				        </td>
			        </tr>
			    </table>
				<br>
				<div class="row">
					<div class="col-md-5">&nbsp;</div>
					<div class="col-md-2">
						<button type="submit" class="btn btn-primary btn-md btn-block" name="submitButton" id="submitButton">Submit</button>
						<input type="hidden" id="dbMD5Pwd" name="dbMD5Pwd" value="<%=request.getAttribute("dbMD5Pwd") %>"/>
						<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
					</div>
					<div class="col-md-5">&nbsp;</div>
				</div>
				
			</div><!-- main content div end-->
			<div class="col-md-2">&nbsp;</div>
		</div>
	</form>
	
<%@ include file="../warningModalDIV.jsp" %>
<%@ include file="../waitingModalDIV.jsp" %>
	
</div><!-- container end -->
</div><!-- wrap end -->
<%@ include file="../footer.jsp" %>
</body>
</html>